Promise
是 ES6 用來處理非同步的一種方法,至於是處理什麼問題呢?
以 jQuery
來說 ajax
的非同步處理就有很多種,這就是第一點,非同步寫法不一致
接下來用 jQuery
的 ajax
搭配 random user 的 api
來舉例程式碼過巢的問題:
$.ajax({
url: url
}).done(function(res){
const seed = res.info.seed;
console.log(seed);
$.ajax({
url: `${url}?seed=${seed}`
}).done(function(res2){
console.log(res2);
});
});
上述的程式碼,在第一次抓取資料完成的時候,先撈取當筆資料的 seed,再把 seed 加上 url 來抓取同一筆資料
ps. 這個要閱讀 random user 的 api
而這個動作只有撈取兩次的資料,當要撈取無數筆的資料就會變成這樣:
$.ajax({
url: url
}).done(function(res){
const seed = res.info.seed;
console.log(seed);
$.ajax({
url: `${url}?seed=${seed}`
}).done(function(res2){
console.log(res2);
$.ajax({
...
}).done(function(){
$.ajax({
...
}).done(function(){
...
});
});
});
});
有沒有發現過巢的問題了? 何況還不易閱讀,而且如果某幾筆資料是要同時執行的時候,也無法。
Promise
的出現,就可以解決上述的問題,Promise
的文章 goolge 之後有很多種,這裡直接簡單扼要的說明Promise
在執行時會有一個等待期,之後就只會有兩種結果,要馬是成功(resolve)
,要馬是失敗(reject)
,成功的話就調用 .then()
失敗則是使用 .catch()